<template>
  <div id="pie" class="mymap"></div>
</template>

<script>
export default {
  methods: {
    pie() {
      // 地区统计图数据及配置
      const option = {
        title: {
          text: '地区统计图',
          // subtext: '纯属虚构'
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // 注意颜色写的位置
        color: [
          '#006cff',
          '#60cda0',
          '#ed8884',
          '#ff9f7f',
          '#0096ff',
          '#9fe6b8',
          '#32c5e9',
          '#1d9dff'
        ],
        // 工具栏
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            magicType: {
              show: true,
              type: ['pie', 'funnel']
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        // 配置
        series: [
          {
            show: true,
            name: '地区统计',
            type: 'pie',
            radius: ['10%', '70%'],
            center: ['50%', '50%'],
            roseType: 'radius',
            label: {
              show: true,
              fontSize: 10
            },
            labelLine: {
              // 连接到图形的线长度
              length: 6,
              // 连接到文字的线长度
              length2: 8
            },
            // 高亮
            emphasis: {
              label: {
                show: true
              }
            },
            // 数据
            data: [
              { value: 20, name: '云南' },
              { value: 26, name: '北京' },
              { value: 24, name: '山东' },
              { value: 25, name: '河北' },
              { value: 20, name: '江苏' },
              { value: 25, name: '浙江' },
              { value: 30, name: '四川' },
              { value: 42, name: '湖北' }
            ]
          }
        ]
      }
      const myChart = this.$echarts.init(document.getElementById('pie'))
      myChart.setOption(option)
    }
  },
  mounted() {
    this.pie()
  }
}
</script>

<style lang="less" scoped>
</style>
